<template>
    <div class="products flex mt-20 bs">
        <el-table :data="orderDetails" :class="state ? 'width' : 'width1'" @row-click="getProductID">
            <el-table-column type="expand">
                <template #default="purchaseorder">
                    <div m="4">
                        <el-table :data="purchaseorder.row.purchaseorder">
                            <el-table-column width="250" />
                            <el-table-column width="150" />
                            <el-table-column width="150" />
                            <el-table-column label="QTY" prop="Qtynumber" />
                            <el-table-column />
                            <el-table-column label="PROFIT" prop="Profit" />
                            <el-table-column />
                            <el-table-column label="LEADING" prop="leading_name" width="90" />
                            <el-table-column align="left" label="CONDITION" prop="product_condition" width="200" />
                            <el-table-column label="RELATED DOC" prop="relatedDoc" width="150" />
                            <el-table-column width="150" />
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <!-- model下拉 -->
            <el-table-column fixed label="MODEL" width="200">
                <template v-slot="product_name_pi">
                    <el-select v-model="product_name_pi.row.product_name_pi" @input="search" @blur="resetproduct"
                        filterable>
                        <el-option v-for="item in modelList" :key="item.label" :label="item.label"
                            :value="`${item.label}|${item.value}`" />
                    </el-select>
                </template>
            </el-table-column>
            <!-- brand下拉 -->
            <el-table-column label="BRAND" width="150">
                <template v-slot="Brand_name">
                    <el-select v-model="Brand_name.row.Brand_name" @blur="resetbrand" @input="search1" filterable>
                        <el-option v-for="item in brandList" :key="item.label" :label="item.label"
                            :value="`${item.label}|${item.value}`" />
                    </el-select>
                </template>
            </el-table-column>
            <!-- 描述与产品名一致，直接绑定产品名 -->
            <el-table-column label="DESCRIPTION" width="150">
                <template v-slot="product_description_pi">
                    <el-input :value="product_description_pi.row.product_name_pi.split('|')[0]" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="QTY">
                <template v-slot="quantity">
                    <el-input v-model="quantity.row.quantity" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="PRICE">
                <template v-slot="price">
                    <el-input v-model="price.row.price" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="PROFIT">
                <template v-slot="profit">
                    <el-input v-model="profit.row.profit" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="COST">
                <template v-slot="cost">
                    <el-input v-model="cost.row.cost" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="LEADING" width="90">
                <template v-slot="leadingtime">
                    <el-select v-model="leadingtime.row.leadingtime" filterable>
                        <el-option v-for="item in leadingList" :key="item" :label="item" :value="item" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column align="left" label="CONDITION" width="200">
                <template v-slot="product_condition">
                    <el-select v-model="product_condition.row.product_condition" filterable>
                        <el-option v-for="item in conditionList" :key="item.text" :label="item.text"
                            :value="item.text" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="RELATED DOC" width="150">
                <template v-slot="related_doc">
                    <el-input v-model="related_doc.row.related_doc" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="OPERATION" width="150">
                <template v-slot="operation">
                    <el-button style="width: 60%;" @click="()=>{deleteProduct(operation)}" type="danger">Remove</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>


const props = defineProps({
    state: Boolean,
    orderDetails: Object,
    modelList: Object,
    brandList: Object,
    leadingList: Object,
    conditionList: Object
})
const emits = defineEmits(['getModel', 'getBrand', 'resetproduct', 'resetbrand', 'getProductID', 'deleteProduct'])


// MODEL的产品方法
const search = (x) => {
    emits('getModel', x)
}
// BRAND品牌方法 
const search1 = (x) => {
    emits('getBrand', x)
}
// 失去焦点
const resetproduct = () => {
    emits('resetproduct')
}
const resetbrand = () => {
    emits('resetbrand')
}
const getProductID = (row) => {
    emits('getProductID', row)
}
// 删除产品
const deleteProduct = (operation) => {
    emits('deleteProduct', operation)
}



</script>

<style lang="less">
.products {
    padding: 10px;
    border: 1px solid #f4f4f4;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;

    .el-table .cell {
        padding: 0;
    }

    .width {
        width: 890px;
        height: 30vh
    }

    .width1 {
        width: 1136px;
        height: 30vh
    }


}
</style>